// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0
import "Variable.js" as Variable
//http://api.fmylife.com/view/7217458?key=4fd9d0cb0463c&language=fr

Page{
    id: comments_page
    function loading(){
        hearder.loading()
    }
    function finished(){
        hearder.finish();
    }
    function recharge(){
        finished();
        xmlModel.xml = Variable.xmlDataComment;
        xmlModel_2.xml = Variable.xmlDataComment;
        xmlModel.reload();
        xmlModel_2.reload();
    }

    onVisibleChanged: recharge()
    onHeightChanged: {
        hearder.height = parent.width < parent.height ? 72 : 46
    }
    tools: ToolBarLayout {
            id: toolBarLayout
            ToolIcon {
                   visible: true
                   platformIconId: "toolbar-back"
                   onClicked: {
                       pageStack.pop();
                   }
               }
    }
    Header{
        id:hearder
        height: 72
        z:1
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        title: "Commentaire"
        Behavior on height { NumberAnimation { duration: 200 }}
    }
    Component{
        id: delegate_vdm
        ShadowRectangle{
            id: rect_vdm
            height: 130
            z:1
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.top: hearder.bottom
            color: "#dedfde"
            anchors.topMargin: 0

            Rectangle{
                id: rectangle_title
                height: 22
                color: "#db667c"
                anchors.left: parent.left
                anchors.leftMargin: 0
                anchors.right: parent.right
                anchors.rightMargin: 1
                opacity: 0.6
                Text {
                    id: title
                    text: "#"+id_vdm
                    font.pixelSize: 15
                    font.bold: true
                }
                Text {
                    id: info
                    x: 292
                    text: date_vdm
                    verticalAlignment: Text.AlignVCenter
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    anchors.right: parent.right
                    anchors.rightMargin: 0
                    horizontalAlignment: Text.AlignHCenter
                    font.pixelSize: 11
                }
            }
            Rectangle{
                id: rectangle_subTitle
                color: "transparent"
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.top: rectangle_title.bottom
                anchors.topMargin: 0

                Text {
                    id: subTitle
                    text: vdm
                    horizontalAlignment: Text.AlignLeft
                    wrapMode: Text.WordWrap
                    anchors.fill: parent
                    font.pixelSize: 16
                }
            }
        }
    }
    ListView{
        id: listview_vdm
        height: 130
        interactive: false
        z:1
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: hearder.bottom
        anchors.topMargin: 0
        model: xmlModel_2
        delegate: delegate_vdm
    }
    CommentDelegate{
        id: mydelegate
    }
    ListView {
        id: listview_comments
        z:0
        anchors.top: listview_vdm.bottom
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.topMargin: 0
        model: xmlModel
        delegate: mydelegate

        states: [
            State {
                name: "loading"
                PropertyChanges {
                    target: listview_comments
                    opacity: 0.2
                }
            },
            State {
                name: "finish"
                PropertyChanges {
                    target: listview_comments
                    opacity: 1
                }
            }
        ]
        transitions: [
            Transition {
                from: "*"
                to: "*"
                NumberAnimation{
                    duration: 400
                }
            }
        ]
     }
    ScrollDecorator{
        flickableItem: listview_comments
    }
    XmlListModel{       //Error and Pages
        id: xmlModel_2
        query: "/root/items/item"
        XmlRole { name: "id_vdm"; query: "@id/string()"}
        XmlRole { name: "author"; query: "author/string()" }
        XmlRole { name: "category"; query: "category/string()" }
        XmlRole { name: "date_vdm"; query: "date/string()" }
        XmlRole { name: "from"; query: "from/string()" }
        XmlRole { name: "agree"; query: "agree/string()" }
        XmlRole { name: "deserved"; query: "deserved/string()" }
        XmlRole { name: "vdm"; query: "text/string()" }
        XmlRole { name: "flag"; query: "comments_flags/string()" }
        XmlRole { name: "commentaire"; query: "comments/string()" }
        XmlRole { name: "lien"; query: "short_url/string()" }
        onXmlChanged: {
            xmlModel_2.errorString();
        }
    }
    XmlListModel{
        id: xmlModel
//        source: "http://api.fmylife.com/view/7222399?key=4fd9d0cb0463c&language=fr"
        query: "/root/comments/comment"
        XmlRole { name: "id"; query: "@id/string()"}
        XmlRole { name: "author"; query: "author/string()" }
        XmlRole { name: "image"; query: "author/@photo/string()"}
        XmlRole { name: "date"; query: "date/string()" }
        XmlRole { name: "texte"; query: "text/string()" }
        XmlRole { name: "pubID"; query: "@pub_id/string()"}

        onXmlChanged: {
            xmlModel.errorString();
        }
    }

}
